<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>九宫格</title>
        <style>
            body {
                width: 700px;
                height: 700px;
                text-align: center;
                margin: 0 auto;
            }
            div {
                width: 200px;
                height: 200px;
                float: left;
                text-align: left;
                margin: 5px 5px;
                font-size: 30px;
            }
    
            .a {
                background-color:#fff;
            }
    
            .b {
                background-color: #fff;
            }
    
            .c {
                background-color: #fff;
            }
    
            .d {
                background-color: #fff;
            }
    
            .e {
                background-color: #fff;
            }
    
            .f {
                background-color: #fff;
            }
    
            .g {
                background-color: #fff;
            }
    
            .h {background-color: #fff;
            }
            .i {background-color: #fff;
            }
        </style>
    </head>
    
    <body>
        <div class="a">
            <img src="https://img1.baidu.com/it/u=1835917445,3237610083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" width="200px" height="200px">
        </div> 
         <div class="b">
            <img src="https://img2.baidu.com/it/u=3449244732,113886072&fm=253&fmt=auto&app=138&f=JPEG?w=865&h=500" width="200px" height="200px">
        </div>
        <div class="c">
            <img src="https://img1.baidu.com/it/u=1729572733,1259173261&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=236" width="200px" height="200px">
        </div>
        <div class="d">
            <img src="https://img2.baidu.com/it/u=4218868312,1134157259&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=406" width="200px" height="200px">
        </div>
        <div class="e">
            <img src="https://img2.baidu.com/it/u=3235089559,1709939792&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" width="200px" height="200px">
        </div>
        <div class="f">
            <img src="https://img0.baidu.com/it/u=1352568706,1990502671&fm=253&fmt=auto&app=138&f=JPEG?w=836&h=500" width="200px" height="200px">
        </div>
        <div class="g">
            <img src="https://img1.baidu.com/it/u=2468422973,3766706284&fm=253&fmt=auto&app=138&f=GIF?w=499&h=297" width="200px" height="200px">
        </div>
        <div class="h">
            <img src="https://img1.baidu.com/it/u=2647813657,3317749284&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=420" width="200px" height="200px">
        </div>
        <div class="i">
            <img src="https://img2.baidu.com/it/u=2982889592,3945093696&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" width="200px" height="200px">
        </div>
    </body>
    
    </html>